/*
发货批次15
*/
<template>
  <div class="app-page">
    <!-- 操作菜单区 -->
    <my-header>
      <el-button type="primary" @click="handleAddUpdate()" v-repeatClick>添加</el-button>
      <el-button @click="handleBeforeUpdate" v-repeatClick>修改</el-button>
      <el-button @click="enabled(false)">禁用</el-button>
      <el-button @click="enabled(true)">启用</el-button>
      <el-button @click="view" v-repeatClick>查看</el-button>
      <el-button @click="getBoarding('')" v-repeatClick>刷新</el-button>
      <el-button type="danger" @click="delBoarding" v-repeatClick>删除</el-button>
    </my-header>

    <!-- 列表区 -->
    <div style="flex: 1; margin-bottom: 10px">
      <div style="display: flex" class="content-height">
        <el-card style="width: 250px">
          <div style="margin-bottom: 10px">发货渠道列表</div>
          <el-tree
            :data="treeData"
            highlight-current
            node-key='id'
            ref="tree"
            @node-click="handleNodeClick"
          ></el-tree>
        </el-card>
        <el-card style="flex: 1; margin-left: 10px">
          <div class="app-page">
            <!-- 搜索区 -->
            <div class="content-flex">
              <div>
                <el-form ref="search" :model="search" inline size="small">
                  <el-form-item label="" prop="batchName">
                    <el-input
                      placeholder="搜索:批次名称"
                      v-model="search.batchName"
                      clearable
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="" prop="enabled">
                    <el-select
                      clearable
                      v-model="search.enabled"
                      placeholder="是否启用"
                      style="width: 100px">
                      <el-option label="是" :value="true"></el-option>
                      <el-option label="否" :value="false"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="创建时间" prop="date">
                    <el-date-picker
                      v-model="search.date"
                      type="daterange"
                      value-format="yyyy-MM-dd"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期">
                    </el-date-picker>
                  </el-form-item>
                  <el-form-item label="" prop="query_batchId">
                    <el-button type="primary" round @click="getBoarding('')">搜索</el-button>
                    <el-button
                      type="warning"
                      round
                      @click="$refs.search.resetFields()"
                    >重置</el-button>
                    <el-button type="primary" round @click="exportExcel" style="background: #1bb99a">导出</el-button>
                  </el-form-item>
                </el-form>
              </div>
              <div style="margin-bottom: 10px;min-width: 100px;text-align: right" class="storeColor">
                <el-button
                  type="text"
                  v-if="selectChannel"
                  style="font-size: 14px"
                >{{ selectChannel }}</el-button>
                <span v-else>全部渠道</span>
              </div>
            </div>
            <!-- 列表区 -->
            <div style="flex: 1">
              <el-table
                height="100%"
                :data="data"
                border
                stripe
                highlight-current-row
                ref="multipleTable"
                @row-dblclick="handleRowDbclick"
                @selection-change="handleSelectionChange"
              >
                <el-table-column type="index" width="55" align="center">
                </el-table-column>
                <el-table-column type="selection" width="55" align="center">
                </el-table-column>
                <el-table-column label="登机批次名称" sortable prop="batchName" align="center" width="180px">
                  <template slot-scope="scope">
                    <el-link @click="handleRowDbclick(scope.row)">{{ scope.row.batchName }}</el-link>
                  </template>
                </el-table-column>
                <el-table-column label="状态" sortable prop="batchStatus" align="center"></el-table-column>
                <el-table-column label="运单状态" sortable prop="workOrderStatus" align="center"></el-table-column>
                <el-table-column label="运单总数" sortable prop="workOrderCount" align="center"></el-table-column>
                <el-table-column label="运单总重" sortable prop="workOrderWeight" align="center"></el-table-column>
                <el-table-column label="航空提单号" sortable prop="ladingNum" align="center"></el-table-column>
                <el-table-column label="起飞日期" sortable prop="takeOffDate" align="center"></el-table-column>
                <el-table-column label="启用" align="center" width="100">
                  <template slot-scope="scope">
                    <span style="font-size: 20px">
                      <i
                        class="el-icon-circle-check"
                        style="color: #67c23a"
                        v-if="scope.row.enabled"
                      ></i>
                      <i
                        class="el-icon-circle-close"
                        style="color: #f56c6c"
                        v-else
                      ></i>
                    </span>
                  </template>
                </el-table-column>
                <el-table-column label="创建时间" sortable prop="createTime" align="center" width="200"></el-table-column>
              </el-table>
            </div>
            <!-- 分页区 -->
            <div style="margin-top: 10px">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[20, 50, 100, 200, 500, 1000]"
                :page-size="pageSize"
                background
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
              >
              </el-pagination>
            </div>
          </div>
        </el-card>
      </div>
    </div>

    <!-- 添加修改查看登机批次信息 -->
    <el-dialog
      :title="title + '登机批次'"
      v-dialog-drag
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false"
      @close="restForm"
    >
      <div style="position: relative">
        <el-form
          size="small"
          :model="boardingForm"
          label-position="left"
          label-width="120px"
          ref="boardingForm"
          :rules="boardingRules"
        >
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item prop="deliveryChannelName" label="发货渠道:">
                <div>{{boardingForm.deliveryChannelName}}</div>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="batchName" label="批次名称">
                <el-input v-model="boardingForm.batchName" placeholder="请输入批次名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="batchStatus" label="状态">
                <el-select
                  style="width: 100%"
                  placeholder="请选择状态"
                  v-model="boardingForm.batchStatus">
                  <el-option
                    v-for="item in boardingOptions.status"
                    :key="item"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item prop="ladingNum" label="航空提单号">
                <el-input v-model="boardingForm.ladingNum" placeholder="请输入航空提单号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="freightAmount" label="空运费">
                <el-input v-model="boardingForm.freightAmount" placeholder="请输入空运费"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="clearanceAmount" label="国内清关费">
                <el-input v-model="boardingForm.clearanceAmount" placeholder="请输入国内清关费"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item prop="takeOffDate" label="起飞日期">
                <el-date-picker
                  v-model="boardingForm.takeOffDate"
                  type="date"
                  size="mini"
                  value-format="yyyy-MM-dd"
                  style="width: 152px"
                  placeholder="选择起飞日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="deliveryAmount" label="国内派送费">
                <el-input v-model="boardingForm.deliveryAmount" placeholder="请输入国内派送费"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="otherAmount" label="其他杂费">
                <el-input v-model="boardingForm.otherAmount" placeholder="请输入其他杂费"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item prop="workOrderStatus" label="运单状态">
                <el-select
                  v-model="boardingForm.workOrderStatus"
                  placeholder="请选择运单状态">
                  <el-option label="已分批" value="已分批"></el-option>
                  <el-option label="已出库" value="已出库"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="workOrderCount" label="运单总数">
                <el-input v-model="boardingForm.workOrderCount" placeholder="请输入运单总数"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="workOrderWeight" label="运单总重">
                <el-input v-model="boardingForm.workOrderWeight" placeholder="请输入运单总重"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item prop="note" label="备注">
                <el-input v-model="boardingForm.note" placeholder="备注" type="textarea"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24" style="text-align: right">
              <el-form-item>
                <el-checkbox v-model="boardingForm.enabled">启用</el-checkbox>
                <el-button style="margin-left: 10px" @click="restForm">重置</el-button>
                <el-button type="primary" @click="submit" v-if="title!='查看'">保存</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
let search = {
  //批次名称
  batchName: "",
  //发货渠道ID
  channelId: "",
  //是否启用
  enabled: "",
  //时间
  date: "",
};

//登机批次信息表单
let boardingForm = {
  //发货渠道ID
  deliveryChannelId: "",
  //发货渠道名称
  deliveryChannelName: "",
  //批次名称
  batchName: "",
  //批次状态
  batchStatus: "",
  //航空提单号
  ladingNum: "",
  //空运费
  freightAmount: "",
  //国内清关费
  clearanceAmount: "",
  //国内派送费
  deliveryAmount: "",
  //起飞日期
  takeOffDate: "",
  //其他杂费
  otherAmount: "",
  //运单总数
  workOrderCount: "",
  //运单状态
  workOrderStatus: "",
  //运单总重
  workOrderWeight: "",
  //备注
  note: "",
  //是否启用
  enabled: true,
};

import myHeader from "@/components/pageHEader/pageHeader";
import { dateFormat } from "@/utils";
import {
  getChannelMap
} from "@/api/intermodals/channel";
import {
  getBoardingBatch,
  addBoardingBatch,
  modBoardingBatch,
  delBoardingBatch,
  disableOrEnableBoardingBatch,
  getBoardingBatchById,
  exportExcel
} from "@/api/intermodals/batch";
export default {
  name: "batch",
  components: {
    myHeader,
  },
  data() {
    return {
      pageSize: 20,
      currentPage: 1,
      total: 0,
      data: [],
      //表格选中
      multipleSelection: [],
      treeData: [],
      //搜索
      search: this.cloneObj(search),
      //选中发货渠道
      selectChannel: "",
      //对话框
      dialogFormVisible: false,
      title: "添加",
      boardingForm: this.cloneObj(boardingForm),
      boardingRules: {
        //批次名称
        batchName: [this.$RegExp.required()],
      },
      boardingOptions: {
        status: [
          '人工纳入',
          '自动纳入',
          '关闭纳入',
        ],
      },
    };
  },
  mounted() {
    this.getBoarding('');

  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      this.getBoarding('');
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getBoarding('');
    },
    handleNodeClick(node) {
      this.selectChannel = node.label;
      this.treeData.forEach(item=>{
        if (node.id == item.id){
          this.boardingForm.deliveryChannelName = item.label
          this.boardingForm.deliveryChannelId = item.id
          this.boardingForm.batchName = item.label + '—213'
        }
      })
      this.getBoarding(this.boardingForm.deliveryChannelId);
      this.$nextTick(function(){
        this.$refs.tree.setCurrentKey(node.id);
      })
    },
    //重置表单信息
    restForm() {
      this.$nextTick(() => {
        if (this.$refs.boardingForm) this.$refs.boardingForm.resetFields();
      });
    },
    handleBeforeUpdate(){
      if (!this.multipleSelection.length) {
        this.tip();
        return;
      }
      if (this.multipleSelection.length > 1) {
        this.tip("只能勾选表格中的一条数据");
        return;
      }
      this.handleAddUpdate(this.multipleSelection[0])
    },
    handleAddUpdate(row) {
      //修改处理
      if (row) {
        //查询单条数据
        getBoardingBatchById(row.id).then((resp) => {
          let row = resp.data;
          //将数据复制给form
          this.handleModform(row, this.boardingForm);
          this.boardingForm.id = row.id;
          this.dialogFormVisible = true;
        });
        this.title = "修改";
      } else {
        if (!this.selectChannel) {
          this.tip("请选择发货渠道");
          return;
        }
        this.title = "添加";
        this.dialogFormVisible = true;
      }
    },
    getBoarding(channelId) {
      let query = {
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        enabled: this.search.enabled,
        batchName: this.search.batchName,
        channelId: this.boardingForm.deliveryChannelId,
        startDate: this.search.date[0]?this.search.date[0]+' 00:00:00':'',
        endDate: this.search.date[1]?this.search.date[1]+' 23:59:59':'',
      };
      //获取所有发货渠道
      getChannelMap().then((resp) => {
        this.treeData = resp.data.map((item) => ({ label: item.name, id: item.id }));
      });
      getBoardingBatch(query).then((resp) => {
        this.data = resp.data.records;
        this.total = resp.data.total;
      });
    },
    //导出
    exportExcel(){
      let query = {
        enabled: this.search.enabled,
        batchName: this.search.batchName,
        channelId: this.boardingForm.deliveryChannelId,
        startDate: this.search.date[0]?this.search.date[0]+' 00:00:00':'',
        endDate: this.search.date[1]?this.search.date[1]+' 23:59:59':'',
      }
      this.download(exportExcel(query),{},'get')
    },
    //表格双击修改
    handleRowDbclick(row) {
      this.handleAddUpdate(row);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    submit() {
      this.$refs["boardingForm"].validate((valid) => {
        if (valid) {
          let submit = Object.assign(
            this.boardingForm
          );
          let request;
          if (this.title == "添加") {
            request = addBoardingBatch(submit);
          } else {
            request = modBoardingBatch(submit);
          }
          request.then((resp) => {
            this.$message.success(resp.message || "成功");
            this.dialogFormVisible = false;
            this.getBoarding('');
          });
        }
      });
    },
    //查看门店信息
    view() {
      this.handleBeforeUpdate();
      this.title = '查看'
    },
    //启用或禁用
    enabled(enabled) {
      if (!this.multipleSelection.length) {
        this.tip();
        return;
      }
      let stores = this.multipleSelection.map((item) => item.id);
      let tip;
      if (enabled) {
        tip = "此操作将启用登机批次, 是否继续?";
      } else {
        tip = "此操作将禁用登机批次, 是否继续?";
      }
      this.confirm(tip).then(() => {
        disableOrEnableBoardingBatch(stores,{enabled}).then((resp) => {
          this.$message.success(resp.message || "成功");
          this.getBoarding('');
        });
      });
    },
    //删除门店
    delBoarding() {
      if (!this.multipleSelection.length) {
        this.tip();
        return;
      }
      this.confirm().then(() => {
        delBoardingBatch(this.multipleSelection.map((item) => item.id)).then(
          (resp) => {
            this.$message.success(resp.message || "成功");
            this.getBoarding('');
          }
        );
      });
    },
  },
};
</script>

<style scoped lang='scss'>

</style>

